<template>
  <div id="app">
    <!-- 1入口
    2写页面
    3配置路由 -->
    <!-- <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/student">学生管理</router-link> |
      <router-link to="/login">登录</router-link>
    </nav> -->
    <!-- 会话：登录，搜索，公司详细，职位分类 -->
    <router-view />
    <GlobalFooter />
    <!-- 通知组件 -->
    <div class="notification-container">
      <Notification v-for="notification in notifications" :key="notification.id" :id="notification.id"
        :title="notification.title" :message="notification.message" :type="notification.type"
        :timestamp="notification.timestamp" />
    </div>
  </div>
</template>

<script>
import Notification from '@/components/chat/notification.vue';
import { mapState } from 'vuex';

export default {
  components: { Notification },
  computed: {
    ...mapState('chat', ['notifications'])
  }
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background: linear-gradient(180deg, rgba(65, 150, 141, 0.15) 0%, #f3f5f7 100%);
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}
</style>
